<template>
    <div class="consultation">
        <el-card class="box-card">
            <div class="search">
                <el-form :inline="true" :model="SearchList" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="SearchList.workTeacherId" placeholder="请输入工号查询"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="SearchList.adminInfo.adminName" placeholder="请输入姓名查询"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="SearchList.workAddress" placeholder="请选择值班地址">
                            <el-option label="请输入值班地址" value=""></el-option>
                            <el-option value="宜宾校区b8a413"></el-option>
                            <el-option value="汇南校区翻斗教室414"></el-option>
                            <el-option value="宜宾校区智慧楼101"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addWork">新增值班表</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-radio-group v-model="SearchList.workDate" @change="Submit()">
                <el-radio-button label="周一"></el-radio-button>
                <el-radio-button label="周二"></el-radio-button>
                <el-radio-button label="周三"></el-radio-button>
                <el-radio-button label="周四"></el-radio-button>
                <el-radio-button label="周五"></el-radio-button>
                <el-radio-button label="">全部</el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="SearchList.num" @change="initOrCon()">
                <el-radio-button label="2">初访</el-radio-button>
                <el-radio-button label="3">咨询</el-radio-button>
                <el-radio-button label="4">心理助理</el-radio-button>
                <el-radio-button label="">全部</el-radio-button>
            </el-radio-group>
            <!--表格信息展示-->
            <el-table ref="multipleTable" :row-class-name="tableRowClassName" :data="workTimeList" tooltip-effect="dark"
                style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection"> </el-table-column>
                <el-table-column prop="workNum" label="值班序号" width='100'></el-table-column>
                <el-table-column prop="workTeacherId" label="工号" width="80"></el-table-column>
                <el-table-column prop="adminInfo.adminProfession" label="职位" width="80"></el-table-column>
                <el-table-column prop="adminInfo.adminName" label="值班姓名" width="100"></el-table-column>
                <el-table-column prop="adminInfo.adminSex" :formatter="parseSex" label="性别" width="100"></el-table-column>
                <el-table-column prop="adminInfo.adminPhone" label="手机号"></el-table-column>
                <el-table-column prop="workAddress" label="值班地址"></el-table-column>
                <el-table-column prop="workDate" label="值班周" width="180">
                </el-table-column>
                <el-table-column prop="workTime" label="值班时间" width="180">
                </el-table-column>
                <el-table-column prop="peopleTotal" label="空闲人数"></el-table-column>
                <el-table-column prop="isFree" label="值班状态" :formatter="parseFree"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.isFree == 3||scope.row.isFree==2" type="success" size="mini" icon="el-icon-circle-check"
                            @click="work(scope.row.workNum, 1)" circle></el-button>
                        <el-popconfirm title="值班结束？" v-if="scope.row.isFree == 1" class="final"
                            @confirm="work(scope.row.workNum, 4)">
                            <el-button slot="reference" type="success" size="mini" icon="el-icon-circle-check"
                                circle></el-button>
                        </el-popconfirm>
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="modify(scope.row.workNum)"
                            circle></el-button>
                        <el-popconfirm title="确定删除吗？" class="delete" @confirm="deleted(scope.row.workNum)">
                            <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button @click="toggleSelection()">取消选择</el-button>
                <el-button @click="deleted(0)">删除</el-button>
            </div>
            <!--分页器-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total" background>
            </el-pagination>
        </el-card>
        <el-dialog title="值班信息修改" :visible.sync="modifyVisible" width="20%">
            <el-form ref="form" :model="workByone" label-width="80px">
                <el-form-item label="值班老师">
                    <el-select v-model="workByone.adminInfo.adminNum" placeholder="请选择值班老师">
                        <el-option v-for="item in teacherList" :key="item.adminId" :label="item.adminName"
                            :value="item.adminNum"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班地点">
                    <el-select v-model="workByone.workAddress" placeholder="请选择值班地点">
                        <el-option value="宜宾校区b8a413"></el-option>
                        <el-option value="汇南校区翻斗教室414"></el-option>
                        <el-option value="宜宾校区智慧楼101"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班周">
                    <el-select v-model="workByone.workDate" placeholder="请选择值班周">
                        <el-option value="周一"></el-option>
                        <el-option value="周二"></el-option>
                        <el-option value="周三"></el-option>
                        <el-option value="周四"></el-option>
                        <el-option value="周五"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班时间">
                    <el-select v-model="workByone.workTime" placeholder="请选择值班时间">
                        <el-option value="8:00-10:00"></el-option>
                        <el-option value="10:00-12:00"></el-option>
                        <el-option value="14:00-16:00"></el-option>
                        <el-option value="16:00-18:00"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyVisible = false">取 消</el-button>
                <el-button type="primary" @click="modifySumbit()">确认</el-button>
            </div>
        </el-dialog>
        <el-dialog title="新增值班表" :visible.sync="dialogVisible" width="20%" @close="close()">
            <el-form :rules="rules" ref="addList" :model="addList" label-width="80px">
                <el-form-item label="值班类型" prop="adminType">
                    <el-select v-model="addList.adminType" placeholder="请选择值班类型" @change="GetTeacher()">
                        <el-option value="初访员"></el-option>
                        <el-option value="咨询师"></el-option>
                        <el-option value="心理助理"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班老师" prop="adminInfo.adminNum">
                    <el-select v-model="addList.adminInfo.adminNum" placeholder="请选择值班老师">
                        <el-option v-for="item in teacherList" :key="item.adminId" :label="item.adminName"
                            :value="item.adminNum"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班地点" prop="workAddress">
                    <el-select v-model="addList.workAddress" placeholder="请选择值班地点">
                        <el-option value="宜宾校区b8a413"></el-option>
                        <el-option value="汇南校区翻斗教室414"></el-option>
                        <el-option value="宜宾校区智慧楼101"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班周" prop="workDate">
                    <el-select v-model="addList.workDate" placeholder="请选择值班周">
                        <el-option value="周一"></el-option>
                        <el-option value="周二"></el-option>
                        <el-option value="周三"></el-option>
                        <el-option value="周四"></el-option>
                        <el-option value="周五"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班时间" prop="workTime">
                    <el-select v-model="addList.workTime" placeholder="请选择值班时间">
                        <el-option value="8:00-10:00"></el-option>
                        <el-option value="10:00-12:00"></el-option>
                        <el-option value="14:00-16:00"></el-option>
                        <el-option value="16:00-18:00"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="addSubmit('addList')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Search from "@/components/search";
import {
    reqGetWorkAll,
    reqGetWorkTotal,
    reqDeletes,
    reqAddWork,
    reqModifyStatus,
    reqGetWorkByNum,
    reqModifyWork
} from "../../api/WorkTime";
import { findAdminByNameApI } from '@/api/Admin/admin'
export default {
    data() {
        return {
            searchType: "初访",
            workByone: {
                adminInfo: {
                    adminNum: "",
                },
                adminId: '',
                workNum: '',
                workTeacherId: '',
                workAddress: '',
                workDate: '',
                workTime: '',
            },
            workTimeList: [],
            //选中行的编号
            rowsWorkNum: [],
            //搜索列表
            SearchList: {
                num: '',
                workAddress: '',
                workTime: '',
                isFree:'',
                workTeacherId: '',
                workDate: '',
                adminInfo: {
                    adminName: ''
                }
            },
            //老师列表
            teacherList: [],
            //新增列表
            addList: {
                adminInfo: {
                    adminNum: "",
                },
                adminId: '',
                adminType: '',
                workNum: '',
                workTeacherId: '',
                workAddress: '',
                workDate: '',
                workTime: '',
            },
            workFreeMap: {
                '1': '值班中',
                '2': '值班预约忙碌',
                '3': '尚未值班',
                '4': '值班结束',
            },
            page: 1,
            limit: 10,
            total: 0,
            dialogVisible: false,
            modifyVisible: false,
            rules: {
                adminType: [
                    { required: true, message: '请选择值班类型', trigger: 'change' },
                ],
                'adminInfo.adminName': [
                    { required: true, message: '请选择值班老师', trigger: 'change' },
                ],
                workAddress: [
                    { required: true, message: '请选择值班地点', trigger: 'change' },
                ],
                workDate: [
                    { required: true, message: '请选择值班周', trigger: 'change' },
                ],
                workTime: [
                    { required: true, message: '请选择值班时间', trigger: 'change' },
                ]
            }
        };
    },
    components: {
        Search,
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //审核状态不同的颜色区分
        tableRowClassName({ row, rowIndex }) {
            if (row.isFree === 2) {
                return 'warning-row';
            } else if (row.isFree === 1) {
                return 'success-row';
            } else if (row.isFree == 4) {
                return 'finish'
            }
            return '';
        },
        //获取所有数据的总数
        async getTotal() {
            let result_Total = await reqGetWorkTotal(this.SearchList);
            this.total = result_Total.data.length;
        },
        /*获取值班信息*/
        async getWorkTimeAll() {
            let result = await reqGetWorkAll((this.page - 1) * this.limit, this.limit, this.SearchList);
            if (result.code == 0) {
                this.workTimeList = JSON.parse(JSON.stringify(result.data));
            }
            this.getTotal();
        },
        //模糊查询
        async onSubmit() {
            this.getWorkTimeAll();
            this.$message({
                message: '查询成功',
                type: 'success'
            });
        },
        //切换周
        Submit() {
            this.getWorkTimeAll();
        },
        //只要初访/咨询值班
        initOrCon() {
            this.getWorkTimeAll();
        },
        handleSelectionChange(selection) {
            this.rowsWorkNum = selection.map(i => {
                return i.workNum;
            })
        },
        handleSizeChange(val) {
            this.limit = val
            this.getWorkTimeAll();
        },
        handleCurrentChange(val) {
            this.page = val
            this.getWorkTimeAll();
        },
        parseSex(row) {
            return row.adminInfo.adminSex == 1 ? '男' : '女'
        },
        parseFree(row) {
            return this.workFreeMap[row.isFree]
        },
        /*删除某行的数据*/
        async deleted(workNum) {
            let result;
            if (workNum != 0) {
                result = await reqDeletes([workNum]);
            } else {
                result = await reqDeletes(this.rowsWorkNum);
            }
            if (result.code == 0) {
                this.getWorkTimeAll();
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.rowsWorkNum = [];
            }
        },
        //获取老师列表
        async GetTeacher() {
            let result = await findAdminByNameApI(this.addList.adminType);
            this.teacherList = result.data.data.filter(i => i.adminWorkStatus == 0);
            this.addList.adminInfo.adminNum = ''
        },
        //打开新增值班表
        addWork() {
            this.dialogVisible = true;
        },
        //新增值班表提交
        async addSubmit(formName) {
            let valid = await this.$refs[formName].validate()
            if (!valid) {
                this.$message({
                    message: '提交失败',
                    type: 'warning'
                })
                return
            }
            else {
                let result = await findAdminByNameApI(this.addList.adminInfo.adminNum);
                this.addList.workTeacherId = result.data.data[0].adminNum;
                this.addList.adminId = result.data.data[0].adminId;
                let initList;
                let consultList;
                if (this.addList.adminType == "初访员") {
                    this.SearchList.num = 2;
                    initList = await reqGetWorkTotal(this.SearchList);
                    this.addList.workNum = 2000000 + initList.data.length + 1
                } else if (this.addList.adminType == "咨询师") {
                    this.SearchList.num = 3;
                    consultList = await reqGetWorkTotal(this.SearchList);
                    this.addList.workNum = 3000000 + consultList.data.length + 1
                } else if (this.addList.adminType == '心理助理') {
                    this.SearchList.num = 4;
                    consultList = await reqGetWorkTotal(this.SearchList);
                    this.addList.workNum = 4000000 + consultList.data.length + 1
                }
                let search = await reqGetWorkTotal(this.addList);
                if (search.data.length != 0) {
                    this.$message({
                        message: '请勿重复添加值班表信息',
                        type: 'warning'
                    })
                    return
                }
                if (this.addList.adminInfo.adminNum == '') {
                    this.$message({
                        message: '请选择值班',
                        type: 'warning'
                    })
                    return
                }
                let List = {
                    workAddress: this.addList.workAddress,
                    workTime: this.addList.workTime,
                    workDate: this.addList.workDate,
                    adminInfo: {
                        adminName: ''
                    },
                    workTeacherId: '',
                    num: '',
                };
                if (this.SearchList.num != 4) {
                    let searchTime = await reqGetWorkTotal(List);
                    if (searchTime.data.length != 0) {
                        this.$message({
                            message: '该时间段该教室已有值班',
                            type: 'warning'
                        })
                        return
                    }
                } else { //如果为心理助理，则可以同时在一个教室一个时间段里同时值班最多一个心理助理
                    List.num = 4
                    let searchTime = await reqGetWorkTotal(List);
                    if (searchTime.data.length != 0) {
                        this.$message({
                            message: '该时间段该教室已有心理助理',
                            type: 'warning'
                        })
                        return
                    }
                }
                List = JSON.parse(JSON.stringify(this.addList));
                List.workAddress = ''
                let Time = await reqGetWorkTotal(List);
                if (Time.data.length != 0) {
                    this.$message({
                        message: '该时间段该教师已有值班安排',
                        type: 'warning'
                    })
                    return
                }
                let addResult = await reqAddWork(this.addList);
                if (addResult.code == 0) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.addList = {
                        adminInfo: {
                            adminNum: '',
                        },
                        adminId: '',
                        adminType: '',
                        workNum: '',
                        workTeacherId: '',
                        workAddress: '',
                        workDate: '',
                        workTime: '',
                    }
                    this.SearchList.num = ''
                    this.teacherList = [];
                    this.getWorkTimeAll();
                }
                this.dialogVisible = false
            }
        },
        //关闭值班表提交界面
        close() {
            this.dialogVisible = false;
            this.addList = {
                adminInfo: {
                    adminNum: '',
                },
                adminId: '',
                adminType: '',
                workNum: '',
                workTeacherId: '',
                workAddress: '',
                workDate: '',
                workTime: '',
            }
            this.SearchList.num = ''
            this.teacherList = [];
        },
        //打开修改界面
        async modify(workNum) {
            this.modifyVisible = true;
            let result = await reqGetWorkByNum(workNum);
            if (result.code == 0) {
                this.workByone = JSON.parse(JSON.stringify(result.data));
            }
            let TeacherResult = await findAdminByNameApI(this.workByone.adminInfo.adminProfession);
            this.teacherList = TeacherResult.data.data.filter(i => i.adminWorkStatus == 0)
        },
        //提交修改
        async modifySumbit() {
            let result = await findAdminByNameApI(this.workByone.adminInfo.adminNum);
            let workOne = {
                adminInfo: result.data.data[0],
                workAddress: this.workByone.workAddress,
                workDate: this.workByone.workDate,
                workTime: this.workByone.workTime,
                workNum: this.workByone.workNum
            }
            let modifySearch = await reqModifyWork(workOne)
            if (modifySearch.code == 0) {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                })
                this.getWorkTimeAll();
                this.modifyVisible = false;
            }
        },
        //开始值班
        async work(workNum, isFree) {
            await reqModifyStatus(workNum, isFree)
            if (isFree == 1) {
                this.$message({
                    message: '开始值班',
                    type: 'success'
                })
            } else if (isFree == 4) {
                this.$message({
                    message: '值班结束'
                })
            }
            this.getWorkTimeAll();
        }
    },
    created() {
        this.getWorkTimeAll();
    }
};
</script>
<style scoped>
.delete {
    margin-left: 10px;
}

.final {
    margin-right: 10px;
}

.el-table /deep/ .warning-row {
    background: oldlace;
}

.el-table /deep/ .success-row {
    background: #f0f9eb;

}

.el-table /deep/ .finish {
    background: rgb(211, 211, 211);
}

.el-radio-group {
    margin-right: 30px;
}
</style>